<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: 'home',
  },
}
</route>
<template>
  <view class="bg-#fafafa min-h-screen">
    <zm-navbar title="" :noTitle="true">
      <template #backBtn>
        <wd-img width="60rpx" mode="widthFix" src="/static/images/sweet.png" />
      </template>
      <template #prefix>
        <view
          class="text-center flex w-450rpx px-20rpx bg-#f5f5f5 ml-20rpx h-60rpx rounded-[996rpx_996rpx_0rpx_996rpx] items-center"
        >
          <wd-icon name="search" size="30rpx" color="rgb(192 185 185)" />
          <view class="color-[rgb(192_185_185)] text-28rpx ml-10rpx">Search~</view>
        </view>
      </template>
    </zm-navbar>
    <view class="w-full px-25rpx">
      <view class="mt-[25rpx] w-full h-312rpx mb-25rpx">
        <wd-swiper
          value-key="bannerUrl"
          text-key="description"
          custom-text-style="color:#fff"
          :list="customSwiperList"
          autoplay
          v-model:current="current"
          height="312rpx"
        ></wd-swiper>
      </view>
      <wd-notice-bar :text="noticeValue" background-color="#fff" color="rgb(192 185 185)">
        <template #prefix>
          <view class="flex items-center mr-20rpx">₍ᐢ.ˬ.⑅ᐢ₎</view>
        </template>
      </wd-notice-bar>
      <view class="w-full flex justify-between mt-25rpx items-center">
        <view class="flex items-center">
          <view class="text-22rpx color-[rgb(192_185_185)] ml-20rpx">૮(˶ᵔ ᵕ ᵔ˶)ა Welcome~</view>
        </view>
        <view class="flex items-center">
          <view class="text-22rpx color-[rgb(192_185_185)] ml-20rpx">(˘•ω•˘)◞⁽˙³˙⁾ More~</view>
        </view>
      </view>
    </view>
    <view class="w-full flex over mt-[30rpx]">
      <view
        class="flex w-[300rpx] h-[180rpx] overflow-hidden link p-[10rpx] items-center shrink-0 first:ml-[20rpx] mr-[20rpx] last:mr-[20rpx] pos-relative"
        v-for="(item, index) in categoryList"
        :key="index"
      >
        <wd-img
          width="100%"
          height="100%"
          mode="heightFix"
          :src="item.background_image"
          radius="8rpx"
        />
        <view
          class="text-26rpx font-600 color-#fff pos-absolute left-[50%] top-[50%] transform-translate-[-50%]"
        >
          {{ item.category_name }}
        </view>
      </view>
    </view>
    <view class="w-full px-25rpx mt-20rpx">
      <waterfalls
        :value="customSwiperList"
        imageKey="bannerUrl"
        :column="2"
        :columnSpace="1.5"
        :seat="2"
      >
        <template v-slot:default="item">
          <view class="w-full">
            <view
              class="w-full bg-#fff p-8rpx shadow-[0rpx_4rpx_13rpx_0rpx_rgba(246,242,234,0.25)]"
            >
              <view class="text-27rpx color-#31383f leading-32rpx mt-12rpx">{{ item.title }}</view>
              <view class="w-full justify-between flex mt-14rpx">
                <!-- <view class="flex items-center">
                  <wd-img width="33rpx" height="33rpx" round :src="imgSrc" />
                  <view class="color-#A6A6A6 text-23rpx ml-8rpx">{{ item.name }}</view>
                </view> -->
              </view>
            </view>
          </view>
        </template>
      </waterfalls>
    </view>
  </view>
</template>

<script lang="ts" setup>
import waterfalls from '@/components/waterfalls/uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.vue'
import { getBanner } from '@/service/index/index'
const current = ref<number>(0)

const customSwiperList = ref([])

const noticeValue = ref([])
const categoryList = ref([])
const getList = () => {
  const params = {
    type: 1,
  }
  getBanner(params)
    .then((res) => {
      if (res.code === 1) {
        customSwiperList.value = res.data.banner
        noticeValue.value = res.data.reports.map((item) => item.report_text)
        categoryList.value = res.data.categoryList
      }
    })
    .catch((err) => {
      console.error('获取存储失败:', err)
    })
}
getList()
</script>

<style lang="scss" scoped>
:deep(.wd-swiper__text) {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 80%;
  text-align: left;
  scale: 0.8;
}
:deep(.wd-notice-bar) {
  border-radius: 25rpx;
  box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(171, 171, 171, 0.25);
}
.over {
  overflow-y: auto;
}
</style>
